<script setup lang="ts">
    import { reactive, ref } from 'vue'
    import RegisterModal from './RegisterModal.vue'
    import FindPassModal from './FindPassModal.vue'
    import { message } from 'ant-design-vue'
    import { loginReq } from '@/api'
    import useDebounce from '@/hooks/useDebounce'
    import { useRouter } from 'vue-router'
    import { useUserStore } from '@/store/user'
    import useKeyEnter from '@/hooks/useKeyEnter'
    import { storeToRefs } from 'pinia'
    import MarkdownCom from '@/components/common/MarkdownCom.vue'
    const userStore = useUserStore()

    const { userInfo } = storeToRefs(userStore)

    interface FormState {
        username: string
        password: string
    }
    const router = useRouter()
    const formState = reactive<FormState>({
        username: '',
        password: '',
    })

    // 注册弹窗
    const showRegister = ref<boolean>(false)

    const showRegisterClick = () => {
        showRegister.value = true
    }

    // 找回密码弹窗
    const showFindPass = ref<boolean>(false)
    const showFindPassClick = () => {
        showFindPass.value = true
    }

    // 登录函数
    const loginFun = useKeyEnter(
        useDebounce(async () => {
            if (formState.username === '' || formState.password === '') {
                message.info('用户名或密码不能为空')
                return
            }
            const res = await loginReq({
                username: formState.username,
                password: formState.password,
            })
            if (res?.data?.accessToken) {
                message.success('登录成功')
                const { accessToken, ...userInfoData } = res.data
                localStorage.setItem('accessToken', accessToken)
                userInfo.value = userInfoData
                router.push('/') // 跳转到首页
            }
        }, 500)
    )

    const handleRegOk = () => {
        showRegister.value = false
    }

    const handleFindPassOk = () => {
        showFindPass.value = false
    }

    const showAboutApp = ref<boolean>(false)
    const showAboutAppFun = () => {
        showAboutApp.value = true
    }
    const handleAboutAppOk = () => {
        showAboutApp.value = false
    }
</script>

<template>
    <div class="loginFrame">
        <a-form
            class="loginForm"
            :model="formState"
            name="loginForm"
            autocomplete="off"
        >
            <a-row class="titleRow">
                <h2 class="title">用户登录</h2>
                <a-button
                    class="registerBut"
                    type="text"
                    @click="showRegisterClick"
                    >点击注册</a-button
                >
            </a-row>
            <a-form-item
                name="username"
                :label-col="{ span: 20 }"
                :wrapper-col="{ span: 24 }"
            >
                <a-input
                    placeholder="username"
                    v-model:value.trim="formState.username"
                    autocomplete="off"
                >
                    <template #prefix>
                        <UserOutlined style="color: rgba(0, 0, 0, 0.6)" />
                    </template>
                </a-input>
            </a-form-item>

            <a-form-item
                name="password"
                :label-col="{ span: 20 }"
                :wrapper-col="{ span: 24 }"
            >
                <a-input-password
                    placeholder="password"
                    v-model:value.trim="formState.password"
                    autocomplete="off"
                >
                    <template #prefix>
                        <LockOutlined style="color: rgba(0, 0, 0, 0.6)" />
                    </template>
                </a-input-password>
            </a-form-item>

            <a-row style="position: relative; top: -10px">
                <a-col :offset="19">
                    <a-button
                        style="color: white"
                        type="text"
                        @click="showFindPassClick"
                        >忘记密码?</a-button
                    >
                </a-col>
            </a-row>

            <a-form-item>
                <a-button
                    class="loginButton"
                    type="primary"
                    @click="loginFun"
                    >登录</a-button
                >
            </a-form-item>
        </a-form>
        <div class="aboutApp">
            <a-button
                style="color: white"
                type="text"
                @click="showAboutAppFun"
                >关于网站</a-button
            >
        </div>
    </div>

    <a-modal
        v-model:open="showRegister"
        title="新用户注册"
        @ok="handleRegOk"
        width="800px"
        :footer="null"
        destroyOnClose
    >
        <RegisterModal v-model="showRegister" />
    </a-modal>
    <a-modal
        v-model:open="showFindPass"
        title="根据邮箱重置密码"
        @ok="handleFindPassOk"
        width="800px"
        :footer="null"
        destroyOnClose
    >
        <FindPassModal v-model="showFindPass" />
    </a-modal>
    <a-modal
        v-model:open="showAboutApp"
        title=""
        @ok="handleAboutAppOk"
        width="800px"
        :footer="null"
        destroyOnClose
    >
        <MarkdownCom content="/static/upload/aboutApp20250809.md" />
    </a-modal>
</template>

<style lang="less" scoped>
    .loginFrame {
        padding: 40px 80px;
        position: absolute;
        top: 48%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 600px;
        height: 400px;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        box-shadow: 0 0 8px rgba(157, 173, 166, 0.37);
        border: 1px solid rgba(157, 173, 166, 0.18);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .aboutApp {
            display: flex;
            justify-content: center;
            width: 100%;
        }

        .loginForm {
            width: 100%;

            .remember {
                color: rgba(240, 240, 240, 0.99);
            }

            .titleRow {
                margin-bottom: 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-right: 10px;

                .title {
                    color: white;
                    font-size: 24px;
                    font-family: '宋体';
                }

                .registerBut {
                    color: white;
                    position: relative;
                    top: 10px;
                    left: 6px;
                }
            }

            .loginButton {
                width: 100%;
                height: 40px;
                border-radius: 20px;
                background: rgb(54, 137, 245)
                    linear-gradient(
                        to right,
                        rgba(54, 137, 245, 0),
                        rgba(0, 255, 0, 0.5) 90%
                    );
                color: white;
                font-size: 16px;
                box-shadow: rgb(109, 108, 108) 0px 0px 4px; //将h-shadow,v-shadow设为0px,实现四周阴影
                transition: background-color 0.5s ease;
            }

            .loginButton:hover {
                background-color: rgb(88, 111, 241);
            }
        }
    }
</style>
